<template>
  <div class="container">
    <div class="title">食用农产品疑似阳性风险预警</div>
    <div class="body">
      <div
        class="echarts"
        ref="echartsBar1Ref"
        :style="{
          width: '50%',
          height: '100%',
        }"
        @mouseenter="handleHover(true)"
        @mouseleave="handleHover(false)"
      ></div>
      <div
        class="echarts"
        ref="echartsBar2Ref"
        :style="{
          width: '50%',
          height: '100%',
        }"
        @mouseenter="handleHover1(true)"
        @mouseleave="handleHover1(false)"
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getHsYSYXYPSByHs, getHsYSYXYPSByHsAJZ } from "@/api";
import { onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts";
import { sendMessage } from "../../hooks/message";

const echartsBar1Ref = ref<HTMLElement>();
const echartsBar2Ref = ref<HTMLElement>();
const animation = ref(true);
const animation1 = ref(true);
const handleHover = (enter: boolean) => {
  animation.value = !enter;
};
const handleHover1 = (enter: boolean) => {
  animation1.value = !enter;
};
const initData = async () => {
  let { data: data1 } = await getHsYSYXYPSByHs();
  const { data: data2 } = await getHsYSYXYPSByHsAJZ();
  data1 = data1.filter(
    (item: any) => item.bhgSum !== null && item.bhgSum !== "0"
  );
  console.log({
    data1,
    data2: data2.filter((item: any) => item.marketnm !== null),
  });
  return { data1, data2: data2.filter((item: any) => item.marketnm !== null) };
};
const createOption1 = (data: any) => {
  let option = {
    title: {
      text: "疑似阳性样品数",
      top: 20,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      // top: "15%",
      // right: "3%",
      // left: "5%",
      // bottom: "10%",
      // height: "80%",
      x: 42,
      y: 60,
      x2: 5,
      y2: 25,
    },
    xAxis: [
      {
        type: "category",
        data: data.map((e: any) => e.marketnm),
        axisLine: {
          lineStyle: {
            color: "#3A67A1",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          interval: 0,
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "单位：人",
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type: 'dashed',
            width: 1,
            color: "#203C6D",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "transparent", // "rgba(0,186,255,.6)"
          },
        },
        minInterval: 1,
      },
    ],
    legend: {
      top: 30,
      right: 0,
      itemWidth: 7,
      itemHeight: 7,
      data: ["阳性数", "处理数"],
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "bar",
        name: "阳性数",
        data: data.map((e: any) => e.bhgSum),
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: "rgba(224, 200, 220, 1)",
          },
        },
        label: {
          normal: {
            color: "#fff",
            show: false,
            formatter: "{c}",
            position: "top",
          },
        },
      },
      {
        type: "bar",
        name: "处理数",
        data: data.map((e: any) => e.jcpici),
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: "rgba(81, 170, 235, 1)",
          },
        },
        label: {
          normal: {
            color: "#fff",
            show: false,
            formatter: "{c}",
            position: "top",
          },
        },
      },
    ],
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 5, // 一次性展示6个。
      },
    ],
  };
  return option;
};
const createOption2 = (data: any) => {
  let option = {
    legend: { data: data.map((e: any) => e.marketnm) },
    title: {
      text: "各市场疑似阳性数",
      top: 20,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      // top: "10%",
      // right: "3%",
      // left: "5%",
      // bottom: "12%",
      // height: "80%",
      x: 42,
      y: 60,
      x2: 15,
      y2: 25,
    },
    xAxis: [
      {
        type: "category",
        data: data.map((e: any) => e.marketnm),
        axisLine: {
          lineStyle: {
            color: "#3A67A1",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          interval: 0,
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "单位：人",
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type: 'dashed',
            width: 1,
            color: "#203C6D",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "transparent", // "rgba(0,186,255,.6)"
          },
        },
        minInterval: 1,
      },
    ],
    series: [
      {
        type: "bar",
        data: data.map((e: any) => e.bhgSum),
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(255, 158, 85, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(255, 158, 85, 0.1)", // 100% 处的颜色
                },
              ],
              false
            ),
            // shadowColor:  "rgba(0,160,221,1)",
            // shadowBlur: 4
          },
        },
        label: {
          normal: {
            color: "#fff",
            show: false,
            formatter: "{c}",
            position: "top",
          },
        },
      },
    ],
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 5, // 一次性展示6个。
      },
    ],
  };
  return option;
};
const timer = ref();
onMounted(async () => {
  const { data1, data2 } = await initData();
  const bar1 = echarts.init(echartsBar1Ref.value!);
  bar1.on("click", (params: any) => {
    const { name } = params;
    sendMessage("jump", "/system/ysjcsjyxcz", {
      ypmc: name,
    });
  });
  const bar2 = echarts.init(echartsBar2Ref.value!);
  bar2.on("click", (params: any) => {
    const { name } = params;
    sendMessage("jump", "/system/ysjcsjyxcz", {
      compname: name,
    });
  });
  const option1 = createOption1(data1);
  const option2 = createOption2(data2);
  bar1.setOption(option1);
  bar2.setOption(option2);
  timer.value = setInterval(() => {
    if (animation.value === true) {
      // 每次向后滚动一个，最后一个从头开始。
      if (option1.dataZoom[0].endValue == data1.length) {
        option1.dataZoom[0].endValue = 5;
        option1.dataZoom[0].startValue = 0;
      } else {
        option1.dataZoom[0].endValue = option1.dataZoom[0].endValue + 1;
        option1.dataZoom[0].startValue = option1.dataZoom[0].startValue + 1;
      }
      bar1.setOption(option1);
    }
    if (animation1.value === true) {
      if (option2.dataZoom[0].endValue == data2.length) {
        option2.dataZoom[0].endValue = 5;
        option2.dataZoom[0].startValue = 0;
      } else {
        option2.dataZoom[0].endValue = option2.dataZoom[0].endValue + 1;
        option2.dataZoom[0].startValue = option2.dataZoom[0].startValue + 1;
      }
      bar2.setOption(option2);
    }
  }, 2000);
});
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
.container {
  min-height: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
  }
}
</style>
